<template>
    <fieldset>
        <legend>常用api</legend>
        <h1 ></h1>
      <h1 id="hh" ref="hh">{{msg}}</h1>
      <input type="text" res="ipt">
      <button @click="handleClick">点击</button>
      <child ></child>
    </fieldset>
</template>
<script>

    //ref作用在dom节点上能够获取真实的dom节点

export default{
   
    data () {
        return {
            msg:"|"
        }
    },
    components:{
        child,
    },
    methods:{
            // $nextTick会依次使用MutationObserver Promise setImmediate setTimeout来执行延迟回调获取更新后的dom
            
        handleClick(){
            console.log(document.getElementById("hh").innerText);
            this.msg="s"
            // mutation.observer

            // this.$nextTick(()=>{
            //     console.log(document.getElementById("hh").innerText);
            // })
            // Promise.resolve()
            // .then(()=>{
            //     console.log(document.getElementById("hh").innerText);
            // })

            // setImmediate(()=>{
            //     console.log(document.getElementById("hh").innerText);
            // })
            // setTimeout(()=>{
            //     console.log(document.getElementById("hh").innerText);
            // })

            // 获取引用
  this.$refs.ipt.focus();
        }
    },
    mounted() {
        // 获取根实例
        console.log(this.$refs);
        // 获取父组件实例，这也可以成为父传子的一种方式，可以链式调用,一直到顶层root实例
      this.$refs.child.change()
        // $nextTick下 一个循环

        // dom更新后回调nextTick(作用)，可以获取数据更新后的dom

    }
}